let gri_v = new Vue({
    el:".grid",
    data:{
        arr:[],
    },
    created:function (){
        if (location.search.indexOf("cid")!= -1) {//包含cid  查询某个分类下的作品
            let cid = location.search.split("=")[1];
            //请求某个分类下的作品
            axios.get("/product/selectByCid?cid=" + cid).then(function (response) {
                gri_v.arr = response.data;
            })
        }else if (location.search.indexOf("wd")!= -1){
            let wd = location.search.split("=")[1];
            axios.get("/product/search?wd="+wd).then(function (response){
                gri_v.arr = response.data;
            })
        }
        else {
            //请求所有分类 信息
            axios.get("/product/select").then(function (response){
                gri_v.arr = response.data;
            })
        }
    },
    updated: function () {
        //此方法当Vue data里面的变量值发生改变时运行
        //通过瀑布流插件控制页面显示
        $(".grid").imagesLoaded().progress(function () {
            $(".grid").masonry({
                itemSelector: ".grid-item",
                columnWidth: 210
            })
            //给图片所在div添加鼠标移入移除事件  hover代表移入移除事件
            $(".grid-item").hover(function (){//移入触发
                //$(this)代表移入div
                //得到移入div里面的字Div(代表蓝条div)
                $(this).children("div").fadeIn(500);
            },function (){//移出触发
                    $(this).children("div").fadeOut(500);
                })
        })

    }
})